<template>
  <div class="home" style="overflow: hidden">
    <div class="right bgColor textColor">
      <div v-if="page">
        <div class="title secondarybgColor">页面设置</div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="屏幕大小">
            <el-input class="inputWH" v-model="form.width" size="mini"></el-input>
            <el-input class="inputWH" v-model="form.height" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="背景色">
            <colorPicker v-model="color" class="colorpicker" />
            <el-input v-model="color" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="背景图片">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="缩放设置">
            <el-radio-group v-model="radio">
              <div class="mar10">
                <el-radio :label="3">按屏幕比例适配</el-radio>
              </div>
              <div class="mar10"><el-radio :label="6">强制铺满</el-radio></div>
              <div class="mar10">
                <el-radio :label="9">原比例展示溢出滚动</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="水印">
            <el-switch v-model="watermark" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
          </el-form-item>
          <el-form-item label="封面">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="group">
        <div class="title secondarybgColor">组配置</div>
        <el-form ref="groupFormRef" :model="groupFormData" label-width="80px">
          <el-form-item label="位置尺寸">
            <el-input v-model="groupFormData.X" size="mini" class="input1"></el-input>
            <el-input v-model="groupFormData.Y" size="mini" class="input1"></el-input>
            <el-input v-model="groupFormData.W" size="mini" class="input1"></el-input>
            <el-input v-model="groupFormData.H" size="mini" class="input1"></el-input>
          </el-form-item>
          <el-form-item label="默认隐藏">
            <el-checkbox v-model="groupFormData.show"></el-checkbox>
          </el-form-item>
          <el-form-item label="透明度">
            <el-slider v-model="transparency" size="mini" class="transparency"></el-slider>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="info">
        <el-tabs v-model="activeName">
          <el-tab-pane label="样式" name="first">
            <div class="title secondarybgColor">{{ tabData.title }}</div>
            <el-collapse v-model="activeNames" class="padding10">
              <el-collapse-item title="基础配置" name="1">
                <el-form ref="baseDeployRef" :model="baseDeployData" label-width="80px">
                  <el-form-item label="位置尺寸">
                    <el-input v-model="baseDeployData.X" size="mini" class="input1"></el-input>
                    <el-input v-model="baseDeployData.Y" size="mini" class="input1"></el-input>
                  </el-form-item>
                  <el-form-item label="大小">
                    <el-input v-model="baseDeployData.W" size="mini" class="input1"></el-input>
                    <el-input v-model="baseDeployData.H" size="mini" class="input1"></el-input>
                  </el-form-item>
                  <el-form-item label="默认隐藏">
                    <el-checkbox v-model="baseDeployData.show"></el-checkbox>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="标题配置" name="2">
                <el-form ref="titleDeployRef" :model="titleDeployData" label-width="80px">
                  <el-form-item label="显示">
                    <el-switch v-model="titleDeployData.show" active-color="#13ce66" change="gvg"> </el-switch>
                  </el-form-item>
                  <template v-if="titleDeployData.show">
                    <myfrom ref="titleDeployRef" :data="titleDeployData" :items="titleDeployItems"></myfrom>
                  </template>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="图例配置" name="3">
                <el-form ref="legendRef" :model="legendData" label-width="80px">
                  <template>
                    <myfrom ref="legendRef" :data="legendData" :items="legendItems" @isshow="isshow"></myfrom>
                  </template>
                </el-form>
              </el-collapse-item>
              <el-collapse-item title="网格配置" name="4">
                <myfrom ref="gridRef" :data="gridData" :items="gridItems"></myfrom>
              </el-collapse-item>
              <el-collapse-item title="横坐标轴配置" name="5">
                <myfrom ref="gridRef" :data="gridData" :items="gridItems"></myfrom>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane label="数据" name="second">
            <div class="title secondarybgColor">{{ tabData.title }}</div>
            <div class="padding10">
              <div class="flex1">
                <div>字段</div>
                <div>映射</div>
                <div>说明</div>
                <div>状态</div>
              </div>
              <div>
                <div class="flex2" v-for="item in mapping" :key="item.value">
                  <div>{{ item.field }}</div>
                  <div>
                    <el-select v-model="item.value" size="mini">
                      <el-option v-for="T in item.option" :key="T.value" :label="T.label" :value="T.value"> </el-option>
                    </el-select>
                  </div>
                  <div>{{ item.explain }}</div>
                  <div>
                    <i v-if="iconShow" class="el-icon-check"></i>
                    <i v-else class="el-icon-close"></i>
                  </div>
                </div>
              </div>

              <div class="mar10">
                <span>数据源类型</span>
                <el-select v-model="dataType.value" size="mini" change="modd">
                  <el-option v-for="item in dataType.option" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </div>
              <!-- 静态数据 -->
              <template v-if="this.dataType.value === '1'">
                <codemirror ref="cmEditor" class="mar10" :value="code" :options="cmOptions" @ready="onCmReady" @focus="onCmFocus" @input="onCmCodeChange" />
                <div class="mar10">
                  <el-checkbox v-model="filterOpen">数据过滤器：已添加{{}}个过滤器</el-checkbox>
                </div>
                <el-select v-model="filter.value" size="mini" placeholder="请选择过滤器">
                  <el-option v-for="item in filter.option" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="drawer = true"></el-button>

                <el-drawer title="数据响应结果" :visible.sync="drawer" :with-header="true">
                  <span>开启过滤器:</span>
                  <el-switch v-model="openfilter"> </el-switch>
                  <el-button @click="addFilter" size="mini">新增</el-button>

                  <div style="width: 525px; padding: 20px">
                    <ul>
                      <li v-for="(item, index) in filterArr" :key="index">
                        <div class="bgfilter"><i class="el-icon-edit" @click="editorshow(item)"></i> <span>过滤器</span> <i class="el-icon-delete" @click="deleteFilter(index)"></i> <el-checkbox v-model="item.checked" @change="changeFilter" class="checkbox">启用</el-checkbox></div>

                        <template v-if="item.show">
                          <div>回调字段</div>
                          <span
                            >function filter( <span>data</span>, <span>callbackArgs</span>
                            ){
                          </span>

                          <MonacoEditor class="monacoedior" height="200" language="javascript" :code="item.code" :editorOptions="item.options" @mounted="onMounted" @codeChange="onCodeChange"> </MonacoEditor>
                          <span>}</span>
                        </template>
                      </li>
                    </ul>
                  </div>
                </el-drawer>
              </template>
              <!-- API接口 -->
              <template v-if="this.dataType.value === '2'">
                <myfrom ref="dataSourceRef" :data="sourceData" :items="sourceItems">
                  <div>333333</div>
                </myfrom>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="交互" name="third">
            <div class="title secondarybgColor">{{ tabData.title }}</div>
            <div>载入动画</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Sketch } from 'vue-color';
import actions from '@/share/actions';

// import language js
import 'codemirror/mode/javascript/javascript.js';

// import theme style
import 'codemirror/theme/base16-dark.css';
import dedent from 'dedent';

import myfrom from '../components/myFrom.vue';

import CodeEditor from '../components/CodeEditor.vue';
import MonacoEditor from 'vue-monaco-editor';

export default {
  name: 'Home',
  components: {
    'sketch-picker': Sketch,
    myfrom,
    CodeEditor,
    MonacoEditor
  },
  data() {
    return {
      boardRoomCode: 'b2d4e7b67eb74c91898e61a4fc9aaf1e',
      page: false,
      group: false,
      info: true,
      form: {
        width: 1920,
        height: 1080,
        bgColor: '#232630',
        imageUrl: true
      },
      groupFormData: {
        X: 0,
        Y: 0,
        W: 0,
        H: 0,
        show: false
      },
      baseDeployData: {
        X: 0,
        Y: 0,
        W: 0,
        H: 0,
        show: false
      },
      titleDeployData: {
        show: true,
        color: '#fff'
      },
      titleDeployItems: [
        {
          label: '内容',
          prop: 'content',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          label: '颜色',
          prop: 'color',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          label: '位置(左)',
          prop: 'left',
          type: 'select',
          props: {
            placeholder: '',
            list: [
              {
                value: 'left',
                label: '居左'
              },
              {
                value: 'center',
                label: '居中'
              },
              {
                value: 'right',
                label: '居右'
              }
            ]
          }
        },
        {
          label: '位置(右)',
          prop: 'right',
          type: 'select',
          props: {
            placeholder: '',
            list: [
              {
                value: 'left',
                label: '居左'
              },
              {
                value: 'center',
                label: '居中'
              },
              {
                value: 'right',
                label: '居右'
              }
            ]
          }
        }
      ],
      legendData: {
        show: true
      },
      legendItems: [
        {
          label: '显示',
          prop: 'show',
          type: 'switch'
        },
        {
          label: '类型',
          prop: 'type',
          type: 'select',
          props: {
            placeholder: '',
            list: [
              {
                value: '1',
                label: '普通图例'
              },
              {
                value: '2',
                label: '可滚动图例'
              }
            ]
          }
        },
        {
          label: '布局',
          prop: 'layout',
          type: 'select',
          props: {
            placeholder: '',
            list: [
              { value: '1', label: '横向' },
              { value: '2', label: '纵向' }
            ]
          }
        },
        {
          label: '位置',
          prop: 'X',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          prop: 'Y',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          prop: 'W',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          prop: 'H',
          type: 'input',
          props: {
            placeholder: ''
          }
        }
      ],
      gridData: { top: 10 },
      gridItems: [
        {
          label: '上',
          prop: 'top',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          label: '下',
          prop: 'bottom',
          type: 'input',
          props: {
            placeholder: '请输入'
          }
        },
        {
          label: '左',
          prop: 'left',
          type: 'input',
          props: {
            placeholder: ''
          }
        },
        {
          label: '右',
          prop: 'right',
          type: 'input',
          props: {
            placeholder: ''
          }
        }
      ],
      watermark: true,
      radio: 3,
      transparency: 100,
      activeName: 'first',
      tabData: {
        title: '标准雷达图'
      },
      activeNames: ['1'],
      color: '#ff0000', // 颜色选择器
      colorShow: false,
      colors: {
        hex: '#194d33',
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1
      },
      // 数据模块的 映射
      mapping: [
        {
          field: 'x',
          value: 'x',
          explain: '类目',
          option: [
            {
              value: '1',
              label: 'x'
            },
            {
              value: '2',
              label: 'y'
            },
            {
              value: '3',
              label: 's'
            }
          ]
        },
        {
          field: 'y',
          value: 'z',
          explain: '值',
          option: [
            {
              value: '1',
              label: 'x'
            },
            {
              value: '2',
              label: 'y'
            },
            {
              value: '3',
              label: 's'
            }
          ]
        },
        {
          field: 'z',
          value: '',
          explain: '系列',
          option: [
            {
              value: '1',
              label: 'x'
            },
            {
              value: '2',
              label: 'y'
            },
            {
              value: '3',
              label: 's'
            }
          ]
        }
      ],
      dataType: {
        value: '1',
        option: [
          {
            value: '1',
            label: '静态数据'
          },
          {
            value: '2',
            label: 'API接口'
          }
        ]
      },
      // 代码编辑器代码 和 配置
      code: dedent`[
        {
          x: '2010/01/01 00:00:00',
          k: 180,
          n: '系列一'
        },
        {
          x: '2010/01/01 00:00:00',
          k: 320,
          n: '系列二'
        }
      ]`,
      cmOptions: {
        tabSize: 4,
        theme: 'base16-dark',
        lineNumbers: true,
        line: true
        // more CodeMirror options...
      },

      filterOpen: false,
      filter: {
        value: '',
        option: [
          { value: '1', label: '静态数据' },
          { value: '2', label: '静态数据' }
        ]
      },

      // 过滤方法-抽屉
      drawer: false,
      // 开启过滤器
      openfilter: false,

      // API接口form 表单
      sourceData: { RequestMode: '1' },
      sourceItems: [
        {
          label: '数据源',
          prop: 'dataSource',
          type: 'select',
          props: {
            placeholder: '请选择',
            list: [
              { value: '1', label: '测试环境' },
              { value: '2', label: '线上' },
              { value: '3', label: '测试环境数据' },
              { value: '4', label: 'iot数据测试' }
            ]
          }
        },
        {
          label: 'Base URL',
          prop: 'inputUrl',
          type: 'input',
          props: {}
        },
        {
          label: '请求方式',
          prop: 'RequestMode',
          type: 'select',
          props: {
            list: [
              { value: '1', label: 'GET' },
              { value: '2', label: 'POST' },
              { value: '3', label: 'PUT' }
            ]
          }
        }
      ],

      filterArr: [
        {
          value: '',
          show: true,
          checked: false,
          code: 'return data',
          options: {
            selectOnLineNumbers: false
          }
        }
      ]
    };
  },
  mounted() {
    actions.setGlobalState({
      name: 'online',
      value: 'dj-board-configbar上线啦'
    });
    actions.onGlobalStateChange((state, prev) => {
      switch (state.name) {
        case 'boardRoomCode':
          this.boardRoomCode = state.value;
          break;
      }
    });
    console.log('the current CodeMirror instance object:', this.codemirror);
  },
  methods: {
    onCmReady(cm) {
      console.log('the editor is readied!', cm);
    },
    onCmFocus(cm) {
      console.log('the editor is focused!', cm);
    },
    onCmCodeChange(newCode) {
      console.log('this is new code', newCode);
      this.code = newCode;
    },
    isshow(val) {
      console.log(val);
    },
    handleConfigChange() {},
    handleStaticDataChange() {},
    onMounted(editor) {
      this.editor = editor;
      console.log(editor);
    },
    onCodeChange(editor) {
      console.log(editor.getValue());
    },

    // 隐藏过滤器
    editorshow(item) {
      item.show = !item.show;
    },
    deleteFilter(index) {
      console.log(index);
      this.filterArr.splice(index, 1);
    },
    // 新增过滤器
    addFilter() {
      this.filterArr.push({
        value: '',
        show: true,
        checked: false,
        code: 'return data',
        options: {
          selectOnLineNumbers: false
        }
      });
    },
    // 启停用 过滤器
    changeFilter(a) {
      console.log(a, '我启用了');
    }
  },
  computed: {
    codemirror() {
      return this.$refs.cmEditor.codemirror;
    },
    iconShow() {
      this.mapping.map((item) => {
        return item.field === item.value;
      });
    }
  },
  watch: {}
};
</script>
<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  .title {
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  .flex1 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
  }
  .flex2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
  .inputWH {
    width: 100px;
    margin-right: 20px;
  }
  .mar10 {
    margin-top: 13px;
  }
  .input1 {
    width: 100px;
    margin-right: 20px;
  }
  .transparency {
    width: 180px;
  }
  /deep/ .el-tabs__item {
    color: var(--textColor);
    width: 110px;
    text-align: center;
  }
  .isTitle {
    width: 200px;
  }
  .h400 {
    height: 400px;
  }
  .padding10 {
    padding: 0 20px;
  }
  /deep/.el-collapse-item__content,
  /deep/.el-collapse-item__header,
  /deep/.el-input__inner,
  /deep/.el-form-item__label,
  /deep/.el-scrollbar,
  /deep/.el-select-dropdown__item {
    background: var(--bgColor);
    color: var(--textColor);
  }
  /deep/.el-tabs__active-bar {
    background-color: var(--buttonbgColor);
  }
  /deep/.cm-s-base16-dark.CodeMirror,
  /deep/.cm-s-base16-dark .CodeMirror-gutters {
    background: var(--secondarybgColor);
  }
  .inputurl {
    width: 250px;
  }
  /deep/ .el-tabs__header {
    position: fixed;
    z-index: 100;
    width: 100%;
    background: var(--bgColor);
  }
  /deep/ .el-tab-pane {
    margin-top: 50px;
  }
  .bgfilter {
    background-color: rgb(45, 47, 56);
    position: relative;
    .checkbox {
      position: absolute;
      right: 0;
    }
  }
  .monacoedior {
    margin: 5px 0;
  }
  li {
    margin: 15px 0;
    border: 1px solid white;
    list-style-type: none;
  }
}
</style>
